<template>
  <div class="container">
    <el-form
      :model="form"
      inline
      class="search-form"
    >
      <el-form-item label="角色名称">
        <el-input v-model="form.name" />
      </el-form-item>

      <FormSearchButton
        @search="handleSearch"
        @reset="handleReset"
        @add="handleAdd"
        @import="handleImport"
        @export="handleExport"
        @exportAll="handleExportAll"
        @batchDelete="handleBatchDelete"
        @downloadTemplate="handleDownloadTemplate"
      />
    </el-form>

    <TablePagination
      :dataList="dataList"
      :headList="headList"
      :page="page"
      :size="size"
      :total="total"
      @edit="handleEdit"
      @delete="handleDelete"
      @detail="handleDetail"
      @change="handleChange"
      @select="handleSelect"
    />

    <PublicModal
      v-if="modalVisible"
      v-model="modalVisible"
      :type="modalType"
      title="角色"
      @close="handleClose"
    >
      <RoleModal :selectedRow="selectedRow" :type="modalType" />
    </PublicModal>

    <DeleteModal
      v-model="deleteModelVisible"
      :type="deleteType"
      @confirm="handleConfirmDelete"
    />
  </div>
</template>

<script setup>
import { findAllRole } from '@w/apis/role'

import { roleConfig } from '../config'

import RoleModal from './RoleModal.vue'

import DeleteModal from '~comp/DeleteModal.vue'
import FormSearchButton from '~comp/FormSearchButton.vue'
import PublicModal from '~comp/PublicModal.vue'
import TablePagination from '~comp/TablePagination.vue'
import { usePageFetchHook } from '~hooks/usePageFetchHook'
import { uploadExcelFile } from '~utils/file'

const form = reactive({
  name: ''
})
const headList = roleConfig.headList

const {
  page,
  size,
  dataList,
  total,
  modalVisible,
  modalType,
  selectedRow,
  deleteDataList,
  deleteType,
  deleteModelVisible,
  fetchData,
  handleSearch,
  handleChange,
  handleSelect,
  handleAdd,
  handleEdit,
  handleDelete,
  handleDetail,
  handleClose,
  handleBatchDelete
} = usePageFetchHook(findAllRole, {
  searchParams: form
})

const handleReset = () => {
  form.name = ''
  page.value = 1
  fetchData()
}

const handleImport = async() => {
  const file = await uploadExcelFile()
  console.log('🚀 ~ handleImport ~ file:', file)
}
const handleExport = () => {
  console.log('handleExport!')
}
const handleExportAll = () => {
  console.log('handleExportAll!')
}
const handleDownloadTemplate = () => {
  console.log('handleDownloadTemplate!')
}
const handleConfirmDelete = () => {
  if(deleteType.value === 'batch') {
    console.log('批量删除', deleteDataList)
  }
  if(deleteType.value === 'single') {
    console.log('单条删除', selectedRow)
  }
  // 删除成功
  // fetchData()
  // deleteModelVisible.value = false
  // selectedRow.value = null
  // deleteDataList.value = []
  setTimeout(() => {
    deleteModelVisible.value = false
    selectedRow.value = null
    deleteDataList.value = []
  }, 500)
}
</script>

<style scoped></style>
